<template>
  <div class="m-content" >
    <h3 style="color: #fafafa">请关注微博：培正森林</h3>
    <div class="block">
      <el-avatar :size="50" :src="user.avatar"></el-avatar>
      <div>{{ user.username }}</div>
      <div>{{ user.gender }}</div>
    </div>
    <div class="maction">
      <el-link href="/#/blogs">主页</el-link>
      <el-divider direction="vertical"></el-divider>
      <span>
<!--          <el-link type="success" href="/blog/add" :disabled="!hasLogin">发表文章</el-link>-->
        <el-link type="success" href="/#/room"  >吹牛</el-link>
        <el-divider direction="vertical"></el-divider>

         <el-link type="success" href="/#/weibo/add"  :disabled="!hasLogin">发表微博</el-link>
        </span>
      <el-divider direction="vertical"></el-divider>
      <span v-show="!hasLogin">
          <el-link type="primary" @click="oauth">微博登陆</el-link>
        </span>


     <span v-show="hasLogin">
          <el-link type="danger" @click="logout">退出</el-link>
      </span>
    </div>
  </div>
</template>
<script>
import { HOST_CONCIG, KEY_CONFIG, DEBUG } from '../api/config/api-config'
import { getUrlKey } from '../utils/string-utils'
export default {
  name: "Header",
  data() {
    return {
      hasLogin: false,
      oauthCode: getUrlKey('code'),
      user: {
        username: '请先登录',
        avatar: "",
        gender: "",

      },
      blogs: {},
      currentPage: 1,
      total: 0
    }
  },

  computed: {
    code: function () {
      if (this.oauthCode) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {

    logout() {
      console.log("tokenis" +localStorage.getItem("token"))
      const _this = this
      _this.$axios.get("/logout", {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res)
        _this.$store.commit("REMOVE_INFO")
        _this.$router.push("/blogs")

      })
    },
    oauth()
    {
      var client_id = KEY_CONFIG.app_key;
      var redirect_uri = KEY_CONFIG.redirect_uri;
      var oauthUrl = HOST_CONCIG.oauth;
      // /api/oauth2/authorize
      console.log(oauthUrl + '?client_id=' + client_id + '&redirect_uri=' + redirect_uri, "_self", "")
        window.open(oauthUrl + '?client_id=' + client_id + '&redirect_uri=' + redirect_uri, "_self", "", true).headers("Access-Control-Allow-Origin","*");
    },
    checkUrl() {
      var vue = this
      if (vue.loginState) {
        vue.goMain()
      } else {
        if (vue.code) {
          vue.$axios.post('/login',vue.oauthCode,{ headers: {
              'Content-Type':'application/json; charset=UTF-8'
            }
          }).then(res =>{

            //获取后端返回的认证码
            const token = res.headers['authorization']
            //使用store里面的方法，将认证码提交到store
            this.$store.commit('SET_TOKEN', token)
            //使用store里面的方法，将用户信息提交到store
            this.$store.commit('SET_USERINFO', res.data.data)
            if(this.$store.getters.getUser.username) {
              this.user.username = this.$store.getters.getUser.username
              this.user.avatar = this.$store.getters.getUser.avatar
              this.hasLogin = true

            }
            this.$router.push("/blogs")
            console.log(res)

          })
        }
      }
    }
  },
  mounted() {

    this.checkUrl()
  },
  created() {
    if(this.$store.getters.getUser.username) {
      this.user.username = this.$store.getters.getUser.username
      this.user.avatar = this.$store.getters.getUser.avatar
      this.hasLogin = true

    }
  },

}
</script>
